<template>
    <div ref="lineChart" class="line-chart"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    mounted() {
      const lineChart = echarts.init(this.$refs.lineChart);
      const option = {
        title: {
          text: '用户事务时间段占比',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '06:00', '12:00', '18:00', '24:00'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '事务占比',
            type: 'line',
            data: [120, 200, 150, 80, 70],
            areaStyle: {},
          },
        ],
      };
      lineChart.setOption(option);
    },
  };
  </script>
  
  <style scoped>
  .line-chart {
    width: 35%;
    height: 350px;
    padding: 1.5rem;
    background-color: #ffffff;
    border-radius: 1.75rem;
    box-shadow: 0 0 30px #0a113612;
  }
  </style>